<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue.js从入门到豁然开朗</title>
    <meta name="author" content="杨迪"/>
    <meta name="Keywords" content="vue.js"/>
    <meta name="description" content="vue.js从入门到豁然开朗"></meta>
    <!-- <link href="assets/bootstrap.min.css" rel="stylesheet"> -->
    <script src="vue.min.js"></script>
    <style>
        #app {
            padding: 50px;
        }

        .table {
            border: 1px solid #bbb;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="container">
        <form class="form-inline">
            <div class="form-group">
                <label for="firstName">First Name</label>
                <input type="text" class="form-control" id="firstName" v-model="user.firstName"/>
            </div>

            <div class="form-group">
                <label for="lastName">Last Name</label>
                <input type="text" class="form-control" id="lastName" v-model="user.lastName"/>
            </div>

            <div class="form-group">
                <label for="userName">User Name</label>
                <input type="text" class="form-control" id="userName" v-model="user.userName"/>
            </div>
            <button type="button" class="btn btn-default" v-on:click="insert">Insert</button>
        </form>
        <table class="table">
            <caption>Optional table caption.</caption>
            <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
                <th>Buttons</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(user,index) in users">
                <th>{{index+1}}</th>
                <td>{{user.firstName}}</td>
                <td>{{user.lastName}}</td>
                <td>@{{user.userName}}</td>
                <td>
                    <button v-on:click="Remove(index)">Remove</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            user: {
                "firstName": "",
                "lastName": "",
                "userName": ""
            },
            users: [
                {
                    "firstName": "Mark",
                    "lastName": "Otto",
                    "userName": "mdo"
                },
                {
                    "firstName": "james",
                    "lastName": "wang",
                    "userName": "wang.zheng"
                }                
            ]
        },
        methods: {
            insert: function () {
                this.users.push(this.user);
            },
            Remove: function (index) {
                this.users.splice(index, 1)
            }
        }
    })
</script>

</html>